<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ecommerce Recommendation System</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<style>
     body {
            background-color: #f8f9fa;
        }
        .navbar {
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }
        .container {
            margin-top: 50px;
        }
        .video-background {
            width: 100%;
            height: 400px; /* Set the height of the video here */
            object-fit: cover; /* Ensure the video covers the entire container */
        }
        .nav-link:hover {
            color: orange !important; /* Change text color on hover */
        }
        .nav-link.btn {
            border-radius: 5px; /* Add rounded corners to buttons */
        }

        .modal-content {
            background-color: #fff; /* Set modal content background color */
            color: #000; /* Set modal content text color */
        }
        .modal-content.dark {
            background-color: #000; /* Set modal content background color for dark theme */
            color: #fff; /* Set modal content text color for dark theme */
        }
        .modal2 {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

      .modal2-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
</style>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand mx-auto" href="#">Ecommerce Recommendation System</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#"><i class="fas fa-home"></i> Home</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#" id="settingsLink"><i class="fas fa-cog"></i> Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link btn btn-outline-primary mr-2" href="#" data-toggle="modal" data-target="#signupModal">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link btn btn-primary" href="#" data-toggle="modal" data-target="#signinModal">Sign In</a>
      </li>
    </ul>
  </div>
</nav>


<!-- Video -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <video class="video-background" autoplay loop muted>
        <source src="static/v.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</div>

<!-- Go To Main Page Button -->
<div class="text-center mt-5">
  <a  href="main" class="btn btn-primary btn-lg">Go To Search Page</a>
  <a  href="cart" class="btn btn-primary btn-lg">Go To Cart Page</a>
</div>

{% if signup_message %}
<h5 style="margin-left:42%;margin-top:10px; text:bold;">{{signup_message}}</h5>
{% endif %}

<!--trending recommendations-->
<!-- Products -->
<div class="container mt-5">
  <h2 class="text-center mb-4">Trending Products</h2>
  <div class="row mt-4">
    {% for index, product in trending_products.iterrows() %}
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <div class="card">
          <img src="{{ random_product_image_urls[index] }}" class="card-img-top" alt="{{ product['Name'] }}" style="height: 200px;">
        <div class="card-body">
          <h5 class="card-title">{{ truncate(product['Name'],12) }}</h5>
          <p class="card-text">Brand: {{ product['Brand'] }}</p>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#productModal{{ index }}">Buy Now</button>
        </div>
      </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="productModal{{ index }}" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="productModalLabel">{{ product['Name'] }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-4">
                  <img src="{{ random_product_image_urls[index] }}" class="img-fluid" alt="{{ product['Name'] }}" style="height: 200px;">
              </div>
              <div class="col-md-8">
                <p><strong>Brand:</strong> {{ product['Brand'] }}</p>
                <!-- Add other product details here -->
                <!-- Example: -->
                <p><strong>Review Count:</strong> {{ product['ReviewCount'] }}</p>
                <p><strong>Rating:</strong> {{ product['Rating'] }}</p>
                <p><strong>Price:</strong> {{ random_price[index] }}</p>
                <!-- Add more details as needed -->
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
          <button type="button" class="btn btn-primary" data-name = "{{product['Name']}}" data-image = "{{product['ImageURL']}}" data-rating = "{{product['Rating']}}" onclick="showModal(this)">Add to Cart</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <p>商品已加入购物车！</p >
        </div>
    </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>



<!-- Bootstrap modal for sign up -->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signupModalLabel">Sign Up</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="/signup" method="post">
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username" required>
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" name="email" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" required>
          </div>
          <button type="submit" class="btn btn-primary">Sign Up</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap modal for sign in -->
<div class="modal fade" id="signinModal" tabindex="-1" aria-labelledby="signinModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signinModalLabel">Sign In</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="/signin" method="post">
          <div class="mb-3">
            <label for="signinUsername" class="form-label">Username</label>
            <input type="text" class="form-control" id="signinUsername" name="signinUsername" required>
          </div>
          <div class="mb-3">
            <label for="signinPassword" class="form-label">Password</label>
            <input type="password" class="form-control" id="signinPassword" name="signinPassword" required>
          </div>
          <button type="submit" class="btn btn-primary">Sign In</button>
        </form>
      </div>
    </div>
  </div>
</div>



<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h5>Choose Theme:</h5>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="theme" id="defaultTheme" value="default" checked>
          <label class="form-check-label" for="defaultTheme">
            Default
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="theme" id="blackTheme" value="black">
          <label class="form-check-label" for="blackTheme">
            Black Theme
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="theme" id="greenTheme" value="green">
          <label class="form-check-label" for="greenTheme">
            Green Theme
          </label>
        </div>
        <hr>
        <h5>Zoom:</h5>
        <button type="button" class="btn btn-primary mr-2" id="zoomIn">Zoom In</button>
        <button type="button" class="btn btn-primary" id="zoomOut">Zoom Out</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="applyTheme">Apply</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
  function showModal(button) {
    document.getElementById('myModal').style.display = "block";
    const name = button.dataset.name
    const image = button.dataset.image
    const rating = button.dataset.rating

    fetch('/add_to_cart', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ productId: name, image:image,rating:rating })  // 你可以传递任何商品数据
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));           
        }

        function closeModal() {
            document.getElementById('myModal').style.display = "none";
        }
  // Handle click on Settings link to open the modal
  document.getElementById('settingsLink').addEventListener('click', function() {
    $('#settingsModal').modal('show');
  });

  // Handle theme apply button click
  document.getElementById('applyTheme').addEventListener('click', function() {
    // Get the selected theme value
    var selectedTheme = document.querySelector('input[name="theme"]:checked').value;

    // Apply the selected theme
    if (selectedTheme === 'black') {
      document.body.style.backgroundColor = 'black';
      document.body.style.color = 'white';
    } else if (selectedTheme === 'green') {
      document.body.style.backgroundColor = 'green';
      document.body.style.color = 'white';
    } else {
      // Default theme
      document.body.style.backgroundColor = '#f8f9fa';
      document.body.style.color = 'black';
    }

    // Close the modal
    $('#settingsModal').modal('hide');
  });

  // Handle zoom in button click
  document.getElementById('zoomIn').addEventListener('click', function() {
    document.body.style.zoom = "115%";
  });

  // Handle zoom out button click
  document.getElementById('zoomOut').addEventListener('click', function() {
    document.body.style.zoom = "100%";
  });
</script>



<!--footer-->
<footer class="footer bg-dark text-white">
    <div class="container" style="padding-top:20px;">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <h5>About Us</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium risus quis urna maximus, eget vestibulum risus vestibulum.</p>
            </div>
            <div class="col-md-3 col-sm-6">
                <h5>Quick Links</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-sm-6">
                <h5>Support</h5>
                <ul class="list-unstyled">
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-sm-6">
                <h5>Contact Us</h5>
                <address>
                    <strong>Company Name</strong><br>
                    123 Street, City<br>
                    Country<br>
                    <i class="fas fa-phone"></i> Phone: +1234567890<br>
                    <i class="fas fa-envelope"></i> Email: info@example.com
                </address>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12">
                <hr class="bg-light">
                <p class="text-center">© 2024 Ecommerce Recommendation System. All Rights Reserved.</p>
            </div>
        </div>
    </div>
</footer>


</body>
</html>